<template>
  <div
    v-loading="loading"
    element-loading-text="正在比对中..."
    element-loading-spinner="el-icon-loading"
  >
    <el-row type="flex" justify="center" :gutter="20">
      <el-col :span="10">
        <p class="upload-header">标准文档</p>
        <el-upload
          class="upload-demo"
          drag
          action
          :auto-upload="false"
          multiple
          :before-upload="beforeUpload"
          :on-exceed="handleFileExceed"
          :file-list="uploadStandard.fileList"
          :on-change="onChangeStandard"
          :on-remove="onRemoveStandard"
          accept=".pdf,.docx,.doc,image/*"
          show-file-list
          :limit="1"
        >
          <i class="el-icon-upload" />
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em>
            <div class="el-upload__tip">支持 WORD , PDF , PNG , JPG</div>
            <div class="el-upload__tip">文件大小应在5KB~50MB之间</div>
          </div>
          <!-- <div slot="tip" class="el-upload__tip">支持word,pdf,png,jpg</div> -->
        </el-upload>
      </el-col>
      <el-col :span="10">
        <p class="upload-header">比对文档</p>
        <el-upload
          class="upload-demo"
          drag
          action
          :before-upload="beforeUpload"
          :disabled="uploadCompare.loading"
          :on-progress="handleFileUploadProgress"
          :on-success="handleFileSuccess"
          :on-change="onChange"
          :on-remove="onRemove"
          :file-list="uploadCompare.fileList"
          :auto-upload="false"
          accept=".pdf,.docx,.doc,image/*"
          show-file-list
          multiple
        >
          <i class="el-icon-upload" />
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip">支持 WORD , PDF , PNG , JPG 比对文档可上传多个</div>
          <div class="el-upload__tip">文件大小应在5KB~50MB之间</div>
        </el-upload>
      </el-col>
    </el-row>
    <el-row type="flex" justify="center">
      <el-col :span="20">
        比对规则忽略设置:
        <el-checkbox v-model="convert_arg.remove_symbol" :disabled="argDisabled" :true-label="1" :false-label="0">标点符号</el-checkbox>
        <el-checkbox v-model="convert_arg.remove_headerfooter" :disabled="argDisabled" :true-label="1" :false-label="0">页眉、页脚</el-checkbox>
        <el-checkbox v-model="convert_arg.remove_comments" :disabled="argDisabled" :true-label="1" :false-label="0">批注</el-checkbox>
        <el-checkbox v-model="convert_arg.remove_stamp" :true-label="1" :false-label="0">印章</el-checkbox>

      </el-col>
    </el-row>
    <div slot="footer" class="dialog-footer" style="text-align: center;">
      <el-button @click="compareHistory">比对历史</el-button>
      <el-button type="primary" @click="compareData">快速比对</el-button>
    </div>
    <el-dialog
      title="查看比对"
      :visible.sync="previewVisible"
      :close-on-click-modal="false"
      :lock-scroll="false"
      :modal-append-to-body="false"
      :fullscreen="true"
      :modal="false"
      :destroy-on-close="true"
    >
      <iframePreview ref="iframePreview" :preview-url="previewUrl" />
    </el-dialog>

    <el-dialog
      title="比对历史"
      :visible.sync="historyVisible"
      :close-on-click-modal="false"
      :lock-scroll="false"
      :modal-append-to-body="false"
      :modal="false"
      :destroy-on-close="true"
      custom-class="dialogForm"
    >
      <compareDataList ref="compareDataList" />
    </el-dialog>
  </div>
</template>

<script>
import { uploadDataFile } from '@/api/oa/compare/compareData'
import compareDataList from './compareDataList.vue'
import iframePreview from './iframePreview.vue'
export default {
  components: {
        compareDataList,
        iframePreview
    },
  data() {
    return {
      // 表单参数
      convert_arg: {
        remove_stamp: 0,
        remove_comments: 1,
        remove_footnote: 0,
        remove_headerfooter: 0,
        remove_symbol: 1
      },
      uploadStandard: {
            fileList: []
      },
      uploadCompare: {
            fileList: []
      },
      // 遮罩层
      loading: false,
      mode: 'deprecated', // 默认
      previewUrl: '',
      argDisabled: false,
      historyVisible: false,
      previewVisible: false,
      // 表单校验
      rules: {},
      maxSize: 50 * 1024 * 1024, // 50MB
      minSize: 5 * 1024 // 5KB
    }
  },
  created() {},
  methods: {
    compareData() {
        if (this.uploadStandard.fileList.length === 0 || this.uploadCompare.fileList.length === 0) {
            this.$message({
                  message: '请先上传文件',
                  type: 'warning'
                })
                return
        }
        this.loading = true
        const formData = new FormData()
        // 标准文档
        this.uploadStandard.fileList.forEach((item) => {
          formData.append('standardDoc', item.raw)
          })
          // 比对文档
          this.uploadCompare.fileList.forEach((item) => {
          formData.append('compareDoc', item.raw)
        })
        formData.append('removeStamp', this.convert_arg.remove_stamp)
        formData.append('removeComments', this.convert_arg.remove_comments)
        formData.append('removeFootnote', this.convert_arg.remove_footnote)
        formData.append('removeHeaderfooter', this.convert_arg.remove_headerfooter)
        formData.append('removeSymbol', this.convert_arg.remove_symbol)
        uploadDataFile(formData).then(res => {
          if (res.code && res.code === 200) {
                // this.$message({
                //     message: '比对成功',
                //     type: 'success'
                //   })
                 this.loading = false
                 this.previewVisible = true
                 this.previewUrl = res.data.previewUrl
                 // 清空文件
                 this.uploadCompare.fileList = []
                 this.uploadStandard.fileList = []
                 this.convert_arg.remove_stamp = 0
                  this.convert_arg.remove_symbol = 1
                  this.convert_arg.remove_headerfooter = 0
                  this.convert_arg.remove_comments = 1
                  this.argDisabled = false
              //  this.closeForm()
          } else {
             this.loading = false
              this.$notify.error({
                title: '错误',
                message: res.msg
              })
          }
        }).catch(() => {
            this.loading = false
        })
    },
     // 文件上传中处理
    handleFileUploadProgress() {
      this.upload.loading = true
    },
    handleFileSuccess(response) {
        console.log(response)
    },
    onChange(file, fileList) {
       for (let i = fileList.length - 1; i >= 0; i--) {
        const file = fileList[i]
        const isLt5K = file.raw.size < this.minSize
        const isGt50M = file.raw.size > this.maxSize
        if (isLt5K || isGt50M) {
          fileList.splice(i, 1)
          const message = isLt5K ? '文件过小' : '文件过大'
          this.$message.warning(`${file.name} ${message}`)
        }
      }
       this.uploadCompare.fileList = fileList
        const fileNameArr = []
        fileList.forEach(file => {
          fileNameArr.push(file.name)
        })
        // 根据合合文档对比文档  ⽂档处理所需参数，只⽀持⽂档全部为word的情况
        this.argDisabled = (this.checkFileNames(fileNameArr))
        if (this.argDisabled) {
          this.convert_arg.remove_stamp = 1
          this.convert_arg.remove_symbol = 0
          this.convert_arg.remove_headerfooter = 0
          this.convert_arg.remove_comments = 0
        } else {
           this.convert_arg.remove_symbol = 1
            this.convert_arg.remove_comments = 1
            this.convert_arg.remove_stamp = 0
        }
    },
    onChangeStandard(file, fileList) {
        for (let i = fileList.length - 1; i >= 0; i--) {
          const file = fileList[i]
          const isLt5K = file.raw.size < this.minSize
          const isGt50M = file.raw.size > this.maxSize
          if (isLt5K || isGt50M) {
            fileList.splice(i, 1)
            const message = isLt5K ? '文件过小' : '文件过大'
            this.$message.warning(`${file.name} ${message}`)
          }
        }
        this.uploadStandard.fileList = fileList
    },
    onRemove(file, fileList) {
         this.uploadCompare.fileList = fileList
         const fileNameArr = []
        fileList.forEach(file => {
          fileNameArr.push(file.name)
        })
         // 根据合合文档对比文档  ⽂档处理所需参数，只⽀持⽂档全部为word的情况
        this.argDisabled = (this.checkFileNames(fileNameArr))
        if (this.argDisabled) {
          this.convert_arg.remove_stamp = 1
          this.convert_arg.remove_symbol = 0
          this.convert_arg.remove_headerfooter = 0
          this.convert_arg.remove_comments = 0
        } else {
           this.convert_arg.remove_symbol = 1
           this.convert_arg.remove_comments = 1
            this.convert_arg.remove_stamp = 0
        }
    },
     onRemoveStandard(file, fileList) {
         this.uploadStandard.fileList = fileList
    },
      // 文件达到上限处理
    handleFileExceed() {
      this.msgError(this.$t('标准文档仅限可上传 1 个文件'))
    },
    // 关闭form页面
      closeForm() {
          // 关闭form页面遮罩层
          this.loading = false
          // 关闭form页面
          if (this.$parent.$parent.formOpen !== undefined) {
            this.$parent.$parent.uploadOpen = false
          }
          // 刷新list页面
          if (this.$parent.$parent.getList !== undefined) {
            this.$parent.$parent.getList()
          }
      },
      // 检查文件后缀名
      checkFileNames(fileNames) {
        const invalidExtensions = ['doc', 'docx']
        return fileNames.some(name => {
          const extension = name.split('.').pop()
          return !invalidExtensions.includes(extension)
        })
      },
      // 比对历史
      compareHistory() {
          this.historyVisible = true
          this.$nextTick(() => {
            this.$refs.compareDataList.getList()
        })
      },
      // 检查文件大小
        checkFileSize(files) {
          let isInvalid = false
          const maxSize = 50 * 1024 * 1024 // 50 MB
          const minSize = 5 * 1024 // 5 KB
          for (let i = 0; i < files.length; i++) {
            const file = files[i]
            if (file.raw.size < minSize || file.raw.size > maxSize) {
              isInvalid = true
              break
            }
          }
          return isInvalid
      },
        beforeUpload(file) {
          const isLt5K = file.raw.size < this.minSize
          const isGt50M = file.raw.size > this.maxSize
          if (isLt5K || isGt50M) {
            // this.$message.error(`文件大小应在5KB~50MB之间`)
            return false
          }
          return true
    }
  }
}
</script>

<style lang="scss" scoped>
.upload-header {
  font-size: 20px;
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  font-weight: bold;
}
.el-upload__tip {
    color:red
}
/deep/.el-upload-dragger{
    // width: 520px;
    height: 321px;
}
/deep/.el-icon-upload{
  line-height: 100px
}
</style>
